@import '../../style/themes';
@import '../../style/mixins';

.x-dropdown {
  @include reset-component();
  
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  // transition
  &-enter-active, &-leave-active {
    transition: none .3s cubic-bezier(0, .7, .5, 1);
    transition-property: opacity, max-height;
    overflow: hidden;
    & > :first-child {
      pointer-events: none;
    }
  }
  &-leave-active {
    transition-duration: .15s;
  }
  &-enter-from, &-leave-to {
    opacity: 0;
  }

  &-has-bg {
    border: $border-base;
    border-width: 1px;
    background: $menu-bg;
    box-shadow: $box-shadow-w;
  }

  &-bottom {
    justify-content: flex-end;
  }

}